<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button>按钮</button>
<script>

    let that;
    let _that;

    /**
     * 1.在ES6中类没有变量提升, 所以必须先定义类, 才能通过类实例化对象
     * 理解:  声明类一定要写在实例化对象的前面
     * 2.类里面的共有属性和方法一定要加this
     * 理解: 类里面方法调用自己的共有属性和方法 都要加 this   共有? 如何理解
     * 3.constructor里面的this指向实例对象, 方法的this指向这个方法的调用者
     */
    class Person {

        /**
         * constructor构造函数, 只要new 生成实例时, 就会自动调用这个函数,
         * 如果不写这个函数, 类也会自动生成这个函数
         * 注意: 构造函数不需要加function (其实类里面所有的函数都不需要写function)
         * #     多个函数方法之间不需要添加 逗号 分隔
         * @param name
         * @param age
         */
        constructor(name, age) {
            // constructor 里面的 this 指向的是创建的实例对象
            console.log(this)
            that = this;
            this.name = name;
            this.age = age;
            // this.code(new Date())

            // 下面的this一定要加
            this.btn = document.querySelector('button');
            /**
             * 点击按钮, 调用code方法的打印结果, this.name为空
             * 这是因为 btn调用了 code方法, 在code方法内部的this指向了 btn,
             * 而btn没有这个 name 属性, 所有会打印这个结果
             * coding!!! [object PointerEvent]
             */
            // this.btn.onclick = this.code;

            // llhuang10 coding!!! [object PointerEvent]
            this.btn.onclick = this.code02;
            // this.btn.onclick = this.code(new Date());  // 这里code这个方法为什么不能加()

        }

        code(time) {
            // 这个code方法里面的this 指向的是 btn 这个按钮, 因为这个按钮调用了函数
            console.log(this)
            console.log(`${this.name} coding!!! ${time}`)
        }

        code02(time) {
            // 这个code方法里面的this 指向的是 btn 这个按钮, 因为这个按钮调用了函数
            // console.log(this)
            // console.log(`${this.name} coding!!! ${time}`)

            // 但是可以使用 that 全局变量, that里面存储的 constructor 里面的this
            console.log(`${that.name} coding!!! ${time}`)
        }

        dance() {
            // 这个dance里面this, 指向的是实例对象 self, 因为self调用了这个函数
            console.log(this)
            _that = this;
        }

    }

    // 2.利用类创建对象 new
    var self = new Person('llhuang10', 18);

    console.log(self)

    console.log(`that === self: ${that === self}`)  // that === self: true

    self.dance();
    console.log(`_that === self: ${_that === self}`)  // _that === self: true
    console.log(`_that === that: ${_that === that}`)  // _that === self: true
</script>
</body>
</html>
